import { NavBar, Dialog } from 'antd-mobile'
import { memo } from 'react'
import { useNavigate } from 'react-router-dom'
import './index.module.less'

const HeaderNav = memo((props) => {
    const navigate = useNavigate()
    const onBack = () => {
        Dialog.confirm({
            content: '确定返回上一页吗？',
            confirmText: '确定',
            cancelText: '取消',
            className: 'header-nav-dialog',
            closeOnAction: true,
            closeOnMaskClick: true,
            onConfirm: () => {
                if (props.onBack) {
                    props.onBack()
                } else {
                    navigate(-1)
                }
            },
            onCancel: () => {
                // 取消操作，不做任何处理
            }
        })
    }

    return (
        <NavBar 
            onBack={props.onBack ? props.onBack : onBack} 
            backArrow={props.backArrow} 
            style={{
                backgroundColor: 'var(--theme-bg-primary)',
                color: 'var(--theme-text-secondary)',
                borderBottom: '1px solid var(--theme-border-secondary)',
                ...props.styleObj
            }}
            right={props.rightContent ? (
                <span 
                    style={{ color: 'var(--theme-primary)', fontWeight: '600', cursor: 'pointer' }}
                    onClick={props.onRightClick}
                >
                    {props.rightContent}
                </span>
            ) : props.right}
        >
            <span style={{ color: 'var(--theme-text-secondary)', fontSize: '18px', fontWeight: '600' }}>
                {props.title}
            </span>
        </NavBar>
    );
});

export default HeaderNav;
